/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 短信/云呼管理 => 短信模版审核
 *  */
import React, { useMemo, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Tabs } from 'antd';
const { TabPane } = Tabs;
import { connect } from 'umi';
import type { ConnectState } from '@/models/connect';
import type { StringObjType } from '@/components/_pages/AmountApply/index.d';
import { usePageTabsChange } from '@/utils/hooks/pageTabs';
import CloudCallTemplate from '@/components/_pages/sms/CloudCall/CloudCallTemplate';

import styles from './index.less';
import RedPoint from '@/components/_pages/red-point';

/**
 * 原本兼容了黑名单的功能，黑名单的功能单独做了。此处关于黑名单部分的代码可以剔除了。
 */
const TemplateAuditIndex = (props: StringObjType) => {
  const { winSize } = props;
  const [show] = usePageTabsChange();
  const [activeKey, setActiveKey] = useState('1');
  const handleTabChange = (key: string) => {
    setActiveKey(key);
    /** 切换tab停止所有播放 */
    const eles: HTMLCollectionOf<HTMLAudioElement> = document.getElementsByTagName('audio');
    for (let index = 0; index < eles.length; index++) {
      const element = eles[index];
      element.pause();
    }
  };
  const screenSize = useMemo(() => ['xs', 'sm'].includes(winSize), [winSize]);
  const tabList = useMemo(
    () => [
      {
        tab: <RedPoint type='0'>待审核</RedPoint>,
        key: '1',
        child: (
          <CloudCallTemplate
            screenSize={screenSize}
            active={activeKey == '1' && show}
            activeKey={activeKey}
          />
        ),
      },
      {
        tab: '已拒绝',
        key: '3',
        child: (
          <CloudCallTemplate
            screenSize={screenSize}
            active={activeKey == '3' && show}
            activeKey={activeKey}
          />
        ),
      },
      // {
      //   tab: '黑名单',
      //   key: 'black',
      //   child: (
      //     <CloudCallTemplate
      //       screenSize={screenSize}
      //       active={activeKey == 'black' && show}
      //       activeKey={activeKey}
      //     />
      //   ),
      // },
    ],
    [activeKey, screenSize, show],
  );

  return (
    <PageContainer className={styles.main}>
      <Tabs onChange={handleTabChange} type='card' activeKey={activeKey}>
        {tabList.map(({ child, ...rest }) => (
          <TabPane key={rest.key} tab={rest.tab} forceRender>
            {child}
          </TabPane>
        ))}
      </Tabs>
    </PageContainer>
  );
};

export default connect(({ global }: ConnectState) => ({
  winSize: global.winSize || '',
}))(React.memo(TemplateAuditIndex));
